<template>
  <div>
    <!-- 统计信息弹窗 -->
    <div class="statistics-popup" v-if="visible">
      <div class="statistics-popup-content" :style="popupStyle">
        <div class="popup-header">
          <h2 class="popup-title">{{ selectedItem.channel }} - 统计信息</h2>
          <div class="header-buttons">
            <!-- 时间筛选 -->
            <div class="time-filter">
              <el-date-picker
                v-model="timeRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="handleTimeChange"
                size="small"
                :popper-options="popperOptions"
              >
              </el-date-picker>
            </div>
            <button class="detail-btn" @click="openArticleListPopup">
              详情
            </button>
            <button class="close-btn" @click="close">×</button>
          </div>
        </div>
        <div class="popup-body">
          <!-- 加载状态 -->
          <div v-if="loading" class="loading-container">加载中...</div>

          <!-- 错误状态 -->
          <div v-else-if="error" class="error-container">
            加载失败: {{ error }}
            <button @click="fetchAllData" class="retry-btn">重试</button>
          </div>

          <!-- 正常显示统计信息 -->
          <div v-else class="charts-main-container">
            <!-- 上部分：水平排列的两个图表 -->
            <div class="top-charts">
              <!-- 左侧：核心指标雷达图 -->
              <div class="chart-section">
                <h3 class="chart-title">核心指标趋势</h3>
                <div class="chart-content">
                  <div v-if="!engagementData.length" class="no-data">
                    暂无核心指标数据
                  </div>
                  <div v-else ref="radarChart" class="chart"></div>
                </div>
              </div>

              <!-- 右侧：平台得分趋势图 -->
              <div class="chart-section">
                <h3 class="chart-title">平台得分趋势(近半年)</h3>
                <div class="chart-content">
                  <div v-if="!rankData.length" class="no-data">
                    暂无得分数据
                  </div>
                  <div v-else ref="scoreChart" class="chart"></div>
                </div>
              </div>
            </div>

            <!-- 下部分：垂直排列的两个图表 -->
            <div class="bottom-charts">
              <!-- 发稿量变化趋势 -->
              <div class="chart-section">
                <h3 class="chart-title">发稿量变化趋势</h3>
                <div class="chart-content">
                  <div v-if="!articleTrendData.length" class="no-data">
                    暂无发稿量数据
                  </div>
                  <div v-else ref="articleChart" class="chart"></div>
                </div>
              </div>

              <!-- 互动量变化趋势 -->
              <div class="chart-section">
                <h3 class="chart-title">互动量变化趋势</h3>
                <div class="chart-content">
                  <div v-if="!interactionTrendData.length" class="no-data">
                    暂无互动量数据
                  </div>
                  <div v-else ref="interactionChart" class="chart"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 文章列表弹窗 -->
    <ArticleListPopup
      :visible="articleListPopupVisible"
      :selected-item="selectedItem"
      @close="closeArticleListPopup"
    />
  </div>
</template>

<script>
import { currentPOST } from "api/modules";
import ArticleListPopup from "../components/assess-detail-list.vue";
import * as echarts from "echarts";
import "@/styles/time.scss";

export default {
  name: "StatisticsPopup",
  components: {
    ArticleListPopup,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedItem: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      error: "",
      engagementData: [],
      rankData: [],
      articleTrendData: [], // 发稿量趋势数据
      interactionTrendData: [], // 互动量趋势数据
      articleListPopupVisible: false,
      timeRange: ["2025-09-20", "2025-10-21"],
      beginOfDay: "2025-09-20",
      endOfDay: "2025-10-21",
      scoreChart: null,
      radarChart: null,
      articleChart: null,
      interactionChart: null,
      // 时间选择器弹出层配置
      popperOptions: {
        placement: "left",
        modifiers: [
          {
            name: "offset",
            options: {
              offset: [0, 0],
            },
          },
        ],
      },
    };
  },
  computed: {
    popupStyle() {
      return {
        width: "1400px",
        height: "900px",
        minHeight: "600px",
        maxWidth: "1600px",
        maxHeight: "1000px",
      };
    },
  },
  watch: {
    visible: {
      handler(newVal) {
        if (newVal && this.selectedItem.channel) {
          this.fetchAllData();
        } else {
          this.disposeCharts();
        }
      },
      immediate: true,
    },
  },
  beforeUnmount() {
    this.disposeCharts();
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    close() {
      this.$emit("close");
    },

    openArticleListPopup() {
      this.articleListPopupVisible = true;
    },

    closeArticleListPopup() {
      this.articleListPopupVisible = false;
      this.selectedItem = {};
    },

    handleTimeChange() {
      if (this.timeRange && this.timeRange.length === 2) {
        this.beginOfDay = this.timeRange[0];
        this.endOfDay = this.timeRange[1];
        console.log("时间范围变更:", this.beginOfDay, this.endOfDay);
        this.fetchAllData();
      } else {
        // 如果清空了时间选择，重置为默认值
        this.timeRange = ["2025-09-29", "2025-10-05"];
        this.beginOfDay = "2025-09-29";
        this.endOfDay = "2025-10-05";
      }
    },

    async fetchAllData() {
      if (!this.selectedItem.channel) {
        console.warn("未选择有效的渠道");
        return;
      }

      this.loading = true;
      this.error = "";

      try {
        // 先清空现有数据
        this.engagementData = [];
        this.rankData = [];
        this.articleTrendData = [];
        this.interactionTrendData = [];

        // 销毁现有图表
        this.disposeCharts();

        await Promise.all([
          this.fetchEngagementData(),
          this.fetchRankData(),
          this.fetchArticleTrendData(),
          this.fetchInteractionTrendData(),
        ]);
      } catch (error) {
        console.error("数据请求失败:", error);
        this.error = error.message || "网络请求失败";
      } finally {
        this.loading = false;
        // 数据获取完成后重新初始化图表
        this.$nextTick(() => {
          this.initCharts();
        });
      }
    },

    fetchEngagementData() {
      return currentPOST("centerAnalysisEngagementAssess", {
        lastDay: 100,
      })
        .then((res) => {
          if (res.code === 0) {
            this.engagementData = res.data || [];
          } else {
            this.error = res.msg || "获取核心指标数据失败";
            this.$Message({
              text: res.msg,
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.error("核心指标数据请求失败:", error);
          throw error;
        });
    },

    fetchRankData() {
      return currentPOST("centerAnalysisRanklineAssess", {
        dateType: 1,
        channel: this.selectedItem.channel,
        beginOfDay: "2025-09-21",
        endOfDay: "2025-10-20",
      })
        .then((res) => {
          if (res.code === 0) {
            this.rankData = res.data || [];
          } else {
            console.error("得分数据获取失败:", res.msg);
          }
        })
        .catch((error) => {
          console.error("得分数据请求失败:", error);
        });
    },

    fetchArticleTrendData() {
      // 发稿量趋势接口
      return currentPOST("centerAnalysisArticlelineAssess", {
        source: this.selectedItem.source,
        channel: this.selectedItem.channel,
        beginOfDay: this.beginOfDay,
        endOfDay: this.endOfDay,
      })
        .then((res) => {
          if (res.code === 0) {
            this.articleTrendData = res.data || [];
            console.log("发稿量数据:", this.articleTrendData);
          } else {
            console.error("发稿量趋势数据获取失败:", res.msg);
          }
        })
        .catch((error) => {
          console.error("发稿量趋势数据请求失败:", error);
        });
    },

    fetchInteractionTrendData() {
      // 互动量趋势接口
      return currentPOST("centerAnalysisEngagementlineAssess", {
        channel: this.selectedItem.channel,
        source: this.selectedItem.source,
        beginOfDay: this.beginOfDay,
        endOfDay: this.endOfDay,
      })
        .then((res) => {
          if (res.code === 0) {
            this.interactionTrendData = res.data || [];
            console.log("互动量数据:", this.interactionTrendData);
          } else {
            console.error("互动量趋势数据获取失败:", res.msg);
          }
        })
        .catch((error) => {
          console.error("互动量趋势数据请求失败:", error);
        });
    },

    initCharts() {
      // 初始化雷达图
      if (this.$refs.radarChart && !this.radarChart) {
        this.radarChart = echarts.init(this.$refs.radarChart);
        this.renderRadarChart();
      }

      // 初始化得分图
      if (this.$refs.scoreChart && !this.scoreChart) {
        this.scoreChart = echarts.init(this.$refs.scoreChart);
        this.renderScoreChart();
      }

      // 初始化发稿量图
      if (this.$refs.articleChart && !this.articleChart) {
        this.articleChart = echarts.init(this.$refs.articleChart);
        this.renderArticleChart();
      }

      // 初始化互动量图
      if (this.$refs.interactionChart && !this.interactionChart) {
        this.interactionChart = echarts.init(this.$refs.interactionChart);
        this.renderInteractionChart();
      }

      window.addEventListener("resize", this.handleResize);
    },

    handleResize() {
      if (this.scoreChart) this.scoreChart.resize();
      if (this.radarChart) this.radarChart.resize();
      if (this.articleChart) this.articleChart.resize();
      if (this.interactionChart) this.interactionChart.resize();
    },

    disposeCharts() {
      if (this.scoreChart) {
        this.scoreChart.dispose();
        this.scoreChart = null;
      }
      if (this.radarChart) {
        this.radarChart.dispose();
        this.radarChart = null;
      }
      if (this.articleChart) {
        this.articleChart.dispose();
        this.articleChart = null;
      }
      if (this.interactionChart) {
        this.interactionChart.dispose();
        this.interactionChart = null;
      }
    },

    renderRadarChart() {
      if (!this.radarChart) return;

      if (!this.engagementData || this.engagementData.length === 0) {
        this.radarChart.setOption({
          title: {
            text: "暂无核心指标数据",
            textStyle: { color: "#bae7ff", fontSize: 14 },
            left: "center",
            top: "center",
          },
        });
        return;
      }

      const radarData = this.processRadarData();

      const option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          borderColor: "#2d5278",
          textStyle: { color: "#fff" },
          formatter: function (params) {
            return `${params.name}<br/>${params.seriesName}: ${params.value}`;
          },
        },
        legend: {
          data: ["核心指标"],
          textStyle: { color: "#bae7ff" },
          bottom: 10,
        },
        radar: {
          shape: "polygon",
          indicator: radarData.indicators,
          axisName: {
            color: "#8ac6ff",
            backgroundColor: "rgba(5, 64, 128, 0.3)",
            borderRadius: 3,
            padding: [3, 5],
          },
          axisLine: { lineStyle: { color: "rgba(45, 82, 120, 0.6)" } },
          splitLine: { lineStyle: { color: "rgba(45, 82, 120, 0.3)" } },
          splitArea: {
            areaStyle: {
              color: ["rgba(5, 64, 128, 0.1)", "rgba(5, 64, 128, 0.05)"],
            },
          },
        },
        series: [
          {
            name: "核心指标",
            type: "radar",
            data: radarData.values,
            symbolSize: 6,
            lineStyle: { width: 2, color: "#1890ff" },
            areaStyle: { color: "rgba(24, 144, 255, 0.3)" },
            itemStyle: { color: "#1890ff" },
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              },
              color: "#ffffff",
            },
          },
        ],
      };

      this.radarChart.setOption(option);
    },

    renderScoreChart() {
      if (!this.scoreChart) return;

      if (!this.rankData || this.rankData.length === 0) {
        this.scoreChart.setOption({
          title: {
            text: "暂无得分数据",
            textStyle: { color: "#bae7ff", fontSize: 14 },
            left: "center",
            top: "center",
          },
        });
        return;
      }

      const processedData = this.processScoreData();

      const option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(5, 64, 128, 0.9)",
          borderColor: "#1890ff",
          textStyle: { color: "#bae7ff" },
          formatter: function (params) {
            let result = `${params[0].axisValue}<br/>`;
            params.forEach((item) => {
              if (item.value !== null) {
                result += `${item.marker} ${item.seriesName}: ${item.value}分<br/>`;
              }
            });
            return result;
          },
        },
        legend: {
          data: processedData.platforms,
          right: 10,
          top: 0,
          textStyle: { color: "#bae7ff", fontSize: 12 },
          itemWidth: 12,
          itemHeight: 8,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: processedData.dates,
          axisLine: { lineStyle: { color: "#2d5278" } },
          axisLabel: { color: "#bae7ff", fontSize: 11 },
          axisTick: { show: false },
        },
        yAxis: {
          type: "value",
          name: "得分",
          nameTextStyle: { color: "#bae7ff", fontSize: 12 },
          axisLine: { lineStyle: { color: "#2d5278" } },
          axisLabel: { color: "#bae7ff", fontSize: 11 },
          splitLine: {
            lineStyle: { color: "rgba(45, 82, 120, 0.3)", type: "dashed" },
          },
          min: 0,
          max: 100,
        },
        series: processedData.series,
      };

      this.scoreChart.setOption(option);
    },

    renderArticleChart() {
      if (!this.articleChart) return;

      if (!this.articleTrendData || this.articleTrendData.length === 0) {
        this.articleChart.setOption({
          title: {
            text: "暂无发稿量数据",
            textStyle: { color: "#bae7ff", fontSize: 14 },
            left: "center",
            top: "center",
          },
        });
        return;
      }

      // 处理数据：按日期排序并格式化
      const sortedData = [...this.articleTrendData].sort(
        (a, b) => new Date(a.date) - new Date(b.date)
      );

      const option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(5, 64, 128, 0.9)",
          borderColor: "#1890ff",
          textStyle: { color: "#bae7ff" },
          formatter: function (params) {
            return `${params[0].axisValue}<br/>发稿量: ${params[0].value}篇`;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: sortedData.map((item) => {
            // 格式化日期显示，只显示月-日
            const date = new Date(item.date);
            return `${(date.getMonth() + 1).toString().padStart(2, "0")}-${date
              .getDate()
              .toString()
              .padStart(2, "0")}`;
          }),
          axisLine: { lineStyle: { color: "#2d5278" } },
          axisLabel: {
            color: "#bae7ff",
            fontSize: 11,
          },
          axisTick: { show: false },
        },
        yAxis: {
          type: "value",
          name: "发稿量(篇)",
          nameTextStyle: { color: "#bae7ff", fontSize: 12 },
          axisLine: { lineStyle: { color: "#2d5278" } },
          axisLabel: { color: "#bae7ff", fontSize: 11 },
          splitLine: {
            lineStyle: { color: "rgba(45, 82, 120, 0.3)", type: "dashed" },
          },
        },
        series: [
          {
            name: "发稿量",
            type: "line",
            data: sortedData.map((item) => item.articleCount),
            smooth: true,
            symbol: "circle",
            symbolSize: 6,
            lineStyle: { width: 3, color: "#1890ff" },
            itemStyle: {
              color: "#1890ff",
              borderColor: "#ffffff",
              borderWidth: 1,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(24, 144, 255, 0.3)" },
                { offset: 1, color: "rgba(24, 144, 255, 0.05)" },
              ]),
            },
          },
        ],
      };

      this.articleChart.setOption(option);
    },

    renderInteractionChart() {
      if (!this.interactionChart) return;

      if (
        !this.interactionTrendData ||
        this.interactionTrendData.length === 0
      ) {
        this.interactionChart.setOption({
          title: {
            text: "暂无互动量数据",
            textStyle: { color: "#bae7ff", fontSize: 14 },
            left: "center",
            top: "center",
          },
        });
        return;
      }

      // 处理数据：按日期排序并计算总互动量
      const sortedData = [...this.interactionTrendData].sort(
        (a, b) => new Date(a.date) - new Date(b.date)
      );

      // 计算总互动量 = 阅读量 + 点赞量 + 转发量
      const interactionData = sortedData.map((item) => ({
        date: item.date,
        totalInteraction:
          item.totalReadCount + item.totalLikeCount + item.totalRttCount,
      }));

      const option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(5, 64, 128, 0.9)",
          borderColor: "#1890ff",
          textStyle: { color: "#bae7ff" },
          formatter: function (params) {
            const data = sortedData[params[0].dataIndex];
            return `${params[0].axisValue}<br/>
                    总互动量: ${params[0].value}<br/>
                    阅读量: ${data.totalReadCount}<br/>
                    点赞量: ${data.totalLikeCount}<br/>
                    转发量: ${data.totalRttCount}`;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: sortedData.map((item) => {
            // 格式化日期显示，只显示月-日
            const date = new Date(item.date);
            return `${(date.getMonth() + 1).toString().padStart(2, "0")}-${date
              .getDate()
              .toString()
              .padStart(2, "0")}`;
          }),
          axisLine: { lineStyle: { color: "#2d5278" } },
          axisLabel: {
            color: "#bae7ff",
            fontSize: 11,
          },
          axisTick: { show: false },
        },
        yAxis: {
          type: "value",
          name: "互动量",
          nameTextStyle: { color: "#bae7ff", fontSize: 12 },
          axisLine: { lineStyle: { color: "#2d5278" } },
          axisLabel: { color: "#bae7ff", fontSize: 11 },
          splitLine: {
            lineStyle: { color: "rgba(45, 82, 120, 0.3)", type: "dashed" },
          },
        },
        series: [
          {
            name: "互动量",
            type: "line",
            data: interactionData.map((item) => item.totalInteraction),
            smooth: true,
            symbol: "circle",
            symbolSize: 6,
            lineStyle: { width: 3, color: "#52c41a" },
            itemStyle: {
              color: "#52c41a",
              borderColor: "#ffffff",
              borderWidth: 1,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(82, 196, 26, 0.3)" },
                { offset: 1, color: "rgba(82, 196, 26, 0.05)" },
              ]),
            },
          },
        ],
      };

      this.interactionChart.setOption(option);
    },

    processRadarData() {
      const indicators = this.engagementData.map((item) => ({
        name: item.title,
        max: Math.max(item.value * 1.2, 1000000),
      }));

      const values = {
        value: this.engagementData.map((item) => item.value),
        name: "核心指标",
      };

      return { indicators, values: [values] };
    },

    processScoreData() {
      const platforms = [
        "微信公众号",
        "微信视频号",
        "微博",
        "抖音",
        "今日头条",
      ];
      const dates = [...new Set(this.rankData.map((item) => item.date))].sort();

      const series = platforms.map((platform, index) => {
        const platformData = this.rankData.filter(
          (item) => item.channel === platform
        );

        const data = dates.map((date) => {
          const item = platformData.find((d) => d.date === date);
          return item ? parseFloat(item.rankScore) : null;
        });

        const colors = ["#1890ff", "#52c41a", "#faad14", "#eb2f96", "#722ed1"];

        return {
          name: platform,
          type: "line",
          data: data,
          smooth: true,
          symbol: "circle",
          symbolSize: 6,
          lineStyle: { color: colors[index], width: 3 },
          itemStyle: {
            color: colors[index],
            borderColor: "#ffffff",
            borderWidth: 1,
          },
        };
      });

      return {
        platforms,
        dates: dates.map((date) => {
          const month = date.split("-")[1];
          return `${parseInt(month)}月`;
        }),
        series,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.statistics-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .statistics-popup-content {
    background: linear-gradient(135deg, #0c1b33 0%, #1a3a5f 100%);
    border: 1px solid #2d5278;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(5, 64, 128, 0.3);
    border-bottom: 1px solid #2d5278;

    .popup-title {
      color: #bae7ff;
      font-size: 16px;
      margin: 0;
      font-weight: bold;
    }

    .header-buttons {
      display: flex;
      align-items: center;
      gap: 15px;

      .time-filter {
        :deep(.el-date-editor) {
          .el-range-input {
            background: transparent;
            color: #bae7ff;
          }
          .el-range-separator {
            color: #bae7ff;
          }
          .el-range__close-icon {
            color: #bae7ff;
          }
        }
      }
    }

    .detail-btn {
      background: rgba(24, 144, 255, 0.3);
      color: #bae7ff;
      border: 1px solid #1890ff;
      border-radius: 4px;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;

      &:hover {
        background: rgba(24, 144, 255, 0.5);
        color: #ffffff;
      }
    }

    .close-btn {
      background: rgba(255, 77, 79, 0.3);
      color: #ffa39e;
      border: 1px solid #ff4d4f;
      border-radius: 4px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background: rgba(255, 77, 79, 0.5);
        color: #ffffff;
      }
    }
  }

  .popup-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .loading-container,
    .error-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #bae7ff;
      text-align: center;

      .retry-btn {
        margin-top: 10px;
        background: rgba(24, 144, 255, 0.3);
        color: #bae7ff;
        border: 1px solid #1890ff;
        border-radius: 4px;
        padding: 6px 12px;
        cursor: pointer;

        &:hover {
          background: rgba(24, 144, 255, 0.5);
          color: #ffffff;
        }
      }
    }

    .charts-main-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      gap: 20px;
    }
  }

  .top-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 320px;
    min-height: 320px;
    flex-shrink: 0;
    margin-bottom: 30px;
  }

  .bottom-charts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-height: 450px;
  }

  .chart-section {
    background: rgba(5, 64, 128, 0.2);
    border: 1px solid #2d5278;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;

    .chart-title {
      color: #bae7ff;
      font-size: 14px;
      margin: 0 0 15px 0;
      text-align: center;
      font-weight: bold;
      flex-shrink: 0;
    }

    .chart-content {
      flex: 1;
      position: relative;
      min-height: 0;

      .chart {
        width: 100%;
        height: 100%;
        min-height: 200px;
      }

      .no-data {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #8ac6ff;
        font-size: 14px;
        background: rgba(5, 64, 128, 0.1);
        border-radius: 4px;
        min-height: 200px;
      }
    }
  }

  /* 针对下部分的垂直排列图表特殊处理 */
  .bottom-charts .chart-section {
    height: calc(50% - 10px);
    min-height: 220px;
  }
}
</style>
